<template>
  <div class="orderlist">
    <!-- <van-nav-bar title="我的订单" left-arrow /> -->

    <van-nav-bar
      title="我的订单"
      @click-left="onClickLeft"
      class="nav"
      to="/my"
      left-arrow
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <van-tabs type="card" color="rgb(159, 128, 82)" v-model="active">
      <van-tab v-for="(item, index) in titles" :key="index" :title="item">
      </van-tab>
    </van-tabs>
    <van-empty
      class="custom-image"
      image="https://m.xiaomiyoupin.com/youpin/static/m/res/images/no_result/no_result_order.png"
      :description="`目前没有${titleText[active]}订单哦~`"
    />
    <recommend />
  </div>
</template>

<script>
import recommend from "./components/Recommend.vue";
export default {
  name: "orderlist",
  data() {
    return {
      active: Number(this.$route.query.active),
      titles: ["全部", "待付款", "待收货", "退款订单", "已收货"],
      titleText: ["任何订单", "待付款", "待收货", "退款", "已收货"],
    };
  },
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.back();
    },
  },
  components: {
    recommend,
  },
};
</script>
<style  scoped>
.nav {
  background-color: transparent;
}
</style>
<style>
.custom-image .van-empty__image {
  width: 0.99rem;
  height: 0.99rem;
}
.van-tabs__wrap .van-tabs__nav {
  background-color: transparent !important;
}
.van-tab__text {
  font-size: 0.15rem;
}
.van-tabs {
  height: 0.44rem;
}
.van-tabs__nav--card {
  border: none;
  /* margin: 0px; */
}

.van-tabs__nav--card .van-tab {
  border: none;
  border-radius: 0.28rem;
}
.van-tabs__wrap {
  height: 0.44rem !important;
}
.van-tabs__nav--card {
  height: 0.44rem !important;
  align-items: center;
}
.van-tab {
  height: 0.25rem;
}
.van-nav-bar__title {
  font-size: 0.17rem;
}
</style>

